<script setup>
import {ref,useTemplateRef,provide} from 'vue'
import axios from 'axios'
import {showMsg} from '@/components/Util'
import { useRouter,RouterLink } from 'vue-router';
let router = useRouter();//路由对象  用来做理由跳转
let username = ref('')
let password = ref('')
let rememberme = ref(false)
function login(){
    if(username.value && password.value){
        let data = new FormData();
        data.append('username',username.value);
        data.append('password',password.value);
        data.append('rememberMe',rememberme.value);
        axios.post('/api/dologin',data).then(res=>{
            console.log(res);
            if(res.data.status==200){
                showMsg('登录成功','info')
                router.push("/home")
            }else{
                showMsg(res.data.msg,'error',2000);
            }
        })
    }else{
                showMsg('表单填写不完整','warn',2000)
            }
}
// let x1 = ref(20)
// let t = useTemplateRef('t')//Test里面的
// function fn1(){
//     t.value.setData(100)
// }
provide('name',"张三")
</script>
<template >
<div class="box">
    <!-- <button @click="fn1">设置子组件值</button>
    <Test ref="t" title="标题" v-model:age="x1"></Test> -->
    <showMsg></showMsg>
    <div class="title">淘宝</div>
    <div class="in">
        <input type="text" placeholder="用户名" class="in1" v-model="username">
        <input type="password" placeholder="密码" class="in2" v-model="password">
    </div>
    <div class="dui">
        <label><input type="checkbox" name="remeberMe" v-model="rememberme">记住密码</label>
        <span><router-link to="/reg" class="span">注册</router-link></span>
    </div>
    <button @click="login">登录->&it;</button>
    
</div>
</template>
<style scoped>
.box{
    width: 400px;
    height: 450px;
    background-color:white;
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background: white;
    color: white;
    box-shadow:7px 7px 12px rgba(0, 0, 0, .8),-7px -7px 12px rgba(255, 255, 255, .10);
}
.title{
    color: #000;
    font-size: 30px;
    margin-top: -70px;
    display: flex;
    justify-content: center;
}
.in input{
    width: 300px;
    height: 50px;
    border-radius: 999px;
    margin-top: 40px;
    margin-left: 40px;
    border: none;
    background: #e9ecef;
    color: #000;
    padding-left: 40px;
}
.in1{
    background-image: url(../assets/img/密码.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 10px;
}
.in2{
    background-image: url(../assets/img/用户.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 10px;
}
.dui{
    color: #000;
    display: flex;
    margin-left: 50px;
    gap: 150px;
}
.span{
    color: #000;
}
button{
    width: 300px;
    height: 50px;
    margin-left:52px;
    display: flex;
    justify-content: center;
    border-radius: 999px;
    padding-top: 10px;
    font-size: 20px;
}
</style>